<icon>
  <style scoped>
  .defs{position: absolute;overflow: hidden;width: 0;height: 0;}
  .icon{display: inline-block;stroke-width: 0;stroke: currentColor;fill: currentColor;}
  .animate-loading {
    -moz-animation: loading 2s infinite linear;
    -webkit-animation: loading 2s infinite linear;
    animation: loading 2s infinite linear;
    display: inline-block;
  }
  span.tooltip{position: absolute;background: rgba(0,0,0,.3);border-radius: 3px;padding: 4px 5px;color: #fff;font-size: 12px;display: inline-block;line-height: 100%;}
  @-moz-keyframes loading {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @-webkit-keyframes loading {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @keyframes loading {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  </style>
  <svg class="defs">
    <defs>
      <symbol if="{opts.name=='home'}" id="icon-home" viewBox="0 0 24 24">
      <title>home</title>
      <path d="M9.984 20.016h-4.969v-8.016h-3l9.984-9 9.984 9h-3v8.016h-4.969v-6h-4.031v6z"></path>
      </symbol>
      <symbol if="{opts.name=='user'}" id="icon-user" viewBox="0 0 24 24">
      <title>user</title>
      <path d="M12 14.016c2.672 0 8.016 1.313 8.016 3.984v2.016h-16.031v-2.016c0-2.672 5.344-3.984 8.016-3.984zM12 12c-2.203 0-3.984-1.781-3.984-3.984s1.781-4.031 3.984-4.031 3.984 1.828 3.984 4.031-1.781 3.984-3.984 3.984z"></path>
      </symbol>
      <symbol if="{opts.name=='mail'}" id="icon-mail" viewBox="0 0 24 24">
      <title>mail</title>
      <path d="M12 11.016l8.016-5.016h-16.031zM20.016 18v-9.984l-8.016 4.969-8.016-4.969v9.984h16.031zM20.016 3.984c1.078 0 1.969 0.938 1.969 2.016v12c0 1.078-0.891 2.016-1.969 2.016h-16.031c-1.078 0-1.969-0.938-1.969-2.016v-12c0-1.078 0.891-2.016 1.969-2.016h16.031z"></path>
      </symbol>
      <symbol if="{opts.name=='message'}" id="icon-message" viewBox="0 0 24 24">
      <title>message</title>
      <path d="M18 8.016v-2.016h-12v2.016h12zM18 11.016v-2.016h-12v2.016h12zM18 14.016v-2.016h-12v2.016h12zM20.016 2.016c1.078 0 1.969 0.891 1.969 1.969v12c0 1.078-0.891 2.016-1.969 2.016h-14.016l-3.984 3.984v-18c0-1.078 0.891-1.969 1.969-1.969h16.031z"></path>
      </symbol>
      <symbol if="{opts.name=='on'}" id="icon-on" viewBox="0 0 27 24">
      <title>on</title>
      <path d="M0 12c0-4.728 3.844-8.571 8.571-8.571h10.286c4.728 0 8.571 3.844 8.571 8.571s-3.844 8.571-8.571 8.571h-10.286c-4.728 0-8.571-3.844-8.571-8.571zM18.857 18.857c3.777 0 6.857-3.080 6.857-6.857s-3.080-6.857-6.857-6.857-6.857 3.080-6.857 6.857 3.080 6.857 6.857 6.857z"></path>
      </symbol>
      <symbol if="{opts.name=='off'}" id="icon-off" viewBox="0 0 27 24">
      <title>off</title>
      <path d="M15.429 12c0-3.777-3.080-6.857-6.857-6.857s-6.857 3.080-6.857 6.857 3.080 6.857 6.857 6.857 6.857-3.080 6.857-6.857zM25.714 12c0-3.777-3.080-6.857-6.857-6.857h-5.17c2.089 1.567 3.455 4.058 3.455 6.857s-1.366 5.29-3.455 6.857h5.17c3.777 0 6.857-3.080 6.857-6.857zM27.429 12c0 4.728-3.844 8.571-8.571 8.571h-10.286c-4.728 0-8.571-3.844-8.571-8.571s3.844-8.571 8.571-8.571h10.286c4.728 0 8.571 3.844 8.571 8.571z"></path>
      </symbol>
      <symbol if="{opts.name=='loading'}" id="icon-loading" viewBox="0 0 24 24">
      <title>loading</title>
      <path d="M12 0c-6.533 0-11.847 5.221-11.996 11.718 0.139-5.669 4.449-10.218 9.746-10.218 5.385 0 9.75 4.701 9.75 10.5 0 1.243 1.007 2.25 2.25 2.25s2.25-1.007 2.25-2.25c0-6.627-5.373-12-12-12zM12 24c6.533 0 11.847-5.221 11.996-11.718-0.139 5.669-4.449 10.218-9.746 10.218-5.385 0-9.75-4.701-9.75-10.5 0-1.243-1.007-2.25-2.25-2.25s-2.25 1.007-2.25 2.25c0 6.627 5.373 12 12 12z"></path>
      </symbol>
      <symbol if="{opts.name=='up'}" id="icon-up" viewBox="0 0 24 24">
      <title>up</title>
      <path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zM21.75 12c0 5.385-4.365 9.75-9.75 9.75s-9.75-4.365-9.75-9.75 4.365-9.75 9.75-9.75 9.75 4.365 9.75 9.75z"></path>
      <path d="M16.564 15.686l2.121-2.121-6.686-6.686-6.686 6.686 2.121 2.121 4.564-4.564z"></path>
      </symbol>
      <symbol if="{opts.name=='setting'}" id="icon-setting" viewBox="0 0 24 24">
      <title>setting</title>
      <path d="M23.506 19.169l-10.794-9.252c0.503-0.944 0.788-2.022 0.788-3.167 0-3.728-3.022-6.75-6.75-6.75-0.682 0-1.34 0.102-1.96 0.29l3.9 3.9c0.583 0.583 0.583 1.538 0 2.121l-2.379 2.379c-0.583 0.583-1.538 0.583-2.121 0l-3.9-3.9c-0.188 0.62-0.29 1.279-0.29 1.96 0 3.728 3.022 6.75 6.75 6.75 1.145 0 2.222-0.285 3.167-0.788l9.252 10.794c0.537 0.626 1.454 0.662 2.037 0.078l2.379-2.379c0.583-0.583 0.548-1.5-0.078-2.037z"></path>
      </symbol>
      <symbol if="{opts.name=='filter'}" id="icon-filter" viewBox="0 0 24 24">
      <title>filter</title>
      <path d="M12 0c-6.627 0-12 1.679-12 3.75v2.25l9 9v7.5c0 0.828 1.343 1.5 3 1.5s3-0.672 3-1.5v-7.5l9-9v-2.25c0-2.071-5.373-3.75-12-3.75zM2.212 3.254c0.561-0.32 1.35-0.624 2.28-0.879 2.061-0.564 4.728-0.875 7.508-0.875s5.447 0.311 7.508 0.875c0.93 0.255 1.719 0.559 2.28 0.879 0.37 0.211 0.57 0.39 0.663 0.496-0.093 0.107-0.293 0.285-0.663 0.496-0.561 0.32-1.35 0.624-2.28 0.879-2.061 0.564-4.728 0.875-7.508 0.875s-5.447-0.311-7.508-0.875c-0.93-0.255-1.719-0.559-2.28-0.879-0.37-0.211-0.57-0.39-0.663-0.496 0.093-0.107 0.293-0.285 0.663-0.496z"></path>
      </symbol>
      <symbol if="{opts.name=='cancel'}" id="icon-cancel" viewBox="0 0 24 24">
      <title>cancel</title>
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zM12 21.75c-5.385 0-9.75-4.365-9.75-9.75s4.365-9.75 9.75-9.75 9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75z"></path>
      <path d="M15.75 6l-3.75 3.75-3.75-3.75-2.25 2.25 3.75 3.75-3.75 3.75 2.25 2.25 3.75-3.75 3.75 3.75 2.25-2.25-3.75-3.75 3.75-3.75z"></path>
      </symbol>
      <symbol if="{opts.name=='search'}" id="icon-search" viewBox="0 0 24 24">
      <title>search</title>
      <path d="M23.256 20.423l-5.685-4.835c-0.588-0.529-1.216-0.772-1.724-0.748 1.342-1.572 2.153-3.611 2.153-5.84 0-4.971-4.029-9-9-9s-9 4.029-9 9 4.029 9 9 9c2.229 0 4.268-0.811 5.84-2.153-0.023 0.508 0.219 1.136 0.748 1.724l4.835 5.685c0.828 0.92 2.18 0.997 3.005 0.172s0.747-2.177-0.172-3.005zM9 15c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"></path>
      </symbol>
      <symbol if="{opts.name=='stack'}" id="icon-stack" viewBox="0 0 32 32">
      <title>stack</title>
      <path d="M32 10l-16-8-16 8 16 8 16-8zM16 4.655l10.689 5.345-10.689 5.345-10.689-5.345 10.689-5.345zM28.795 14.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398zM28.795 20.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398z"></path>
      </symbol>
    </defs>
  </svg>
  <svg onmouseenter="{ev.tipOn}" onclick="{ev.tip}" onmouseleave="{ev.tipOff}"
    class="icon {'animate-loading': opts.name=='loading'} icon-{opts.name}"
    style="width: {opts.size||'24px'};
           height: {opts.size||'24px'};
           margin: {opts.margin||'0'};">
    <use xlink:href="#icon-{opts.name}"></use>
  </svg>
  <span ref="tip" class="tooltip" show="{tip&&opts.tooltip}">
    {opts.tooltip}
  </span>
  <script>
    var tag = this;
    tag.tip = false;
    tag.ev = {
      tipOn: function(){
        tag.refs.tip.style.top = tag.root.offsetTop-10;
        tag.refs.tip.style.left = tag.root.offsetLeft+tag.root.offsetWidth;
        tag.tip = true;
      },
      tipOff: function(){
        tag.tip = false;
      },
      tip: function(){
        tag.tip = !tag.tip;
      }
    };
    tag.fn = {};
    tag.on('mount', function(){});
  </script>
</icon>
